<template>
  <div class="container">
    <h1 class="page-title">商品详情</h1>

    <div v-if="product" class="product-details">
      <img :src="product.imagePath" alt="商品图片" class="product-image" />
      <div class="product-info">
        <h2>{{ product.name }}</h2>
        <p><strong>价格:</strong> {{ product.price }} 元</p>
        <p><strong>类别:</strong> {{ product.categoryName }}</p>
        <p><strong>库存:</strong> {{ product.stock }}</p>
        <p><strong>描述:</strong> {{ product.description }}</p>
        <p><strong>状态:</strong> {{ product.state === 1 ? '上架' : '冻结' }}</p>
      </div>
    </div>

    <div v-else>
      <p>加载中...</p>
    </div>

    <button class="back-button" @click="goBack">返回</button>
  </div>
</template>

<script>
import request from '@/utils/request'; // 引入封装好的axios实例

export default {
  props: ['id'], // 接收路由参数中的商品ID
  data() {
    return {
      product: null,
    };
  },
  methods: {
    fetchProductDetails() {
      request.get(`/product/selectById/${this.id}`)
          .then((res) => {
            if (res.code === "200") {
              this.product = res.data;
            } else {
              alert(res.msg || "获取商品详情失败");
            }
          })
          .catch(() => {
            alert("请求失败，请检查网络");
          });
    },

    // 返回按钮方法
    goBack() {
      this.$router.go(-1);  // 返回上一页
    }
  },
  mounted() {
    this.fetchProductDetails();
  },
};
</script>

<style scoped>
/* 商品详情页面样式 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
}

.page-title {
  font-size: 28px;
  color: #004f85;
  margin-bottom: 20px;
}

.product-details {
  display: flex;
  gap: 20px;
}

.product-image {
  max-width: 300px;
  max-height: 300px;
  object-fit: cover;
  border-radius: 8px;
}

.product-info {
  flex: 1;
}

.product-info h2 {
  font-size: 24px;
  color: #333;
}

.product-info p {
  font-size: 16px;
  color: #555;
  margin-bottom: 10px;
}

.back-button {
  background-color: #004f85;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  margin-bottom: 20px;
}

.back-button:hover {
  background-color: #003c6f;
}
</style>
